$(function(){
    $('.monitor .tabs>a').on('click',function(){
        console.log('----')
        $(this).addClass('active').siblings().removeClass('active')
        let i = $(this).index()
        $('.monitor .content').eq(i).show().siblings('.content').hide()
    })
    $('.monitor .marquee').each(function(){
        // $(this).child().clone
        $(this).append($(this).children().clone())
    })
})

$(function(){
    let myChart = echarts.init(document.querySelector('.pie'))
    let option = {
        tooltip:{
            formatter:'{a}<br/>{b}:{c} ({d})'
        },
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        series:[
            {
                name:'点位统计',
                type:'pie',
                data:[
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ],
                radius:['10%','75%'],
                roseType:'radius',
                
                labelLine:{
                    length:6,
                    length2:8
                },
                label:{
                    fontSize:12
                }
            }
        ]
    }
    myChart.setOption(option)
    // window.onresize = myChart.resize
    window.addEventListener('resize',function(){
        myChart.resize()
    })
})

$(function(){
    let myChart = echarts.init(document.querySelector('.bar'))
    let option = {
       
        xAxis: {
            type: 'category',
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            axisTick:{
                alignWithLabel:false,
                show:false
            },
            axisLabel:{
                color:'#4c9bfd'
            },
            axisLine:{
                lineStyle:{
                    color:'rgba(0,240,255,0.3)'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisTick:{
                alignWithLabel:false,
                show:false
            },
            axisLabel:{
                color:'#4c9bfd'
            },
            axisLine:{
                lineStyle:{
                    color:'rgba(0,240,255,0.3)'
                }
            },
            splitLine:{
                lineStyle:{
                    color:'rgba(0,240,255,0.3)'
                }
            }
        },
        color:{
            type:'linear',
            x:0,
            y:0,
            x2:0,
            y2:1,
            colorStops:[{
                offset:0,color:'#83bff6'
            },{
                offset:1,color:'#188df0'
            }],
            globalCoord:false
        },
        tooltip:{
            trigger:'item'
        },
        grid:{
            top:'3%',
            right:'3%',
            bottom:'3%',
            left:'3%',
            containLabel:'true',
            show:true,
            borderColor:'rgba(0,240,255,0.3)'
        },
        series: [{
            data: [ 2100,1900,1700,1560,1400,{
                value:1200,
                name:'..',
                itemStyle: {
                    color: '#254065'
                  },
                   // 鼠标经过柱子颜色
                  emphasis: {
                    itemStyle: {
                      color: '#254065'
                    }
                  },
                  // 工具提示隐藏
                  tooltip: {
                    extraCssText: 'opacity:0'
                  },
            },{
                value:1200,
                name:'..',
                itemStyle: {
                    color: '#254065'
                  },
                   // 鼠标经过柱子颜色
                  emphasis: {
                    itemStyle: {
                      color: '#254065'
                    }
                  },
                  // 工具提示隐藏
                  tooltip: {
                    extraCssText: 'opacity:0'
                  },
            },{
                value:1200,
                name:'..',
                itemStyle: {
                    color: '#254065'
                  },
                   // 鼠标经过柱子颜色
                  emphasis: {
                    itemStyle: {
                      color: '#254065'
                    }
                  },
                  // 工具提示隐藏
                  tooltip: {
                    extraCssText: 'opacity:0'
                  },
            },900,750,600,480,240],
            type: 'bar',
            item : {
                name:'',
                value: 1200,
                // 柱子颜色
                itemStyle: {
                  color: '#254065'
                },
                 // 鼠标经过柱子颜色
                emphasis: {
                  itemStyle: {
                    color: '#254065'
                  }
                },
                // 工具提示隐藏
                tooltip: {
                  extraCssText: 'opacity:0'
                },
              }
        }]
        
    };
    myChart.setOption(option)
    window.addEventListener('resize',function(){
        myChart.resize()
    })
})

//订单
$(function(){
    let index = 0
    let data = {
        day365: { orders: '20,301,987', amount: '99834' },
        day90: { orders: '301,987', amount: '9834' },
        day30: { orders: '1,987', amount: '3834' },
        day1: { orders: '987', amount: '834' }
      }
      $('.order .filter>a').on('click',function(){
          $(this).addClass('active').siblings().removeClass('active')
          let key = $(this).data('key')
          let obj = data[key]
        //   console.log(obj)
          $('.order .item h4').eq(0).text(obj.orders)
          $('.order .item h4').eq(1).text(obj.amount)
        })
        $('.order .filter>a').eq(0).click()
        setInterval(function(){
        index++
        $()
        if(index>=4){
            index=0
        }
        $('.order .filter>a').eq(index).click()
        },10000)
})

//销售统计
$(function(){
    let index = 0
    let data = {
        year: [
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
          [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
          [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
          [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
          [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
          [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
          [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
      }
    let myChart = echarts.init(document.querySelector('.line'))
    let option = {
        grid:{
            top:'20%',
            right:'3%',
            bottom:'4%',
            left:'3%',
            containLabel:true,
            show:true,
            borderColor:'#012f4a'
        },
        legend:{
            textStyle:{
                color:'#4c9bfd'
            },
            right:'10%'
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick:{
                show:false  //去除刻度线
            },
            axisLine:{
                show:false  //去除轴线
            },
            boundaryGap:false
        },
        yAxis: {
            type: 'value',
            axisTick:{
                show:false  //去除刻度线
            },
            axisLabel:{
                color:'#4c9bfd'
            },
            splitLine:{
                lineStyle:{
                    color:'#012f4a'
                }
            }
        },
        color: ['#00f2f1', '#ed3f35'],
        series: [{
            name:'预期销售额',
            type: 'line',
            smooth: true,
            data:  data.year[0],
        },{
            name:'实际销售额',
            data: data.year[1],
            smooth: true,
            type: 'line',
           
        }]
    }
    myChart.setOption(option)
    //注册点击事件
    $('.sales .caption>a').on('click',function(){
        $(this).addClass('active').siblings().removeClass('active')
        let key = $(this).data('key')
        index = $(this).index()-1
        // console.log(option.series[0])
        option.series[0].data = data[key][0]
        option.series[1].data = data[key][1]
        myChart.setOption(option)
    })
    let timer = setInterval(function(){
        index++
        if(index>3){
            index=0
        }
        $('.sales .caption>a').eq(index).click()
    },1000)
    $(".sales").hover(
        function() {
          clearInterval(timer);
        }, function() {
            clearInterval(timer);
            timer = setInterval(function() {
              index++;
              if (index >= 4) index = 0;
              $('.sales .caption>a').eq(index).click();
            }, 1000);
          })
    // window.onresize = myChart.resize
    // window.addEventListener('resize',function(){
    //     myChart.resize()
    // })
})


$(function(){
    let inde = 0
    let hotData = [
        {
          city: '北京',  // 城市
          sales: '25, 179',  // 销售额
          flag: true, //  上升还是下降
          brands: [   //  品牌种类数据
            { name: '可爱多', num: '9,086', flag: true },
            { name: '娃哈哈', num: '8,341', flag: true },
            { name: '喜之郎', num: '7,407', flag: false },
            { name: '八喜', num: '6,080', flag: false },
            { name: '小洋人', num: '6,724', flag: false },
            { name: '好多鱼', num: '2,170', flag: true },
          ]
        },
        {
          city: '河北',
          sales: '23,252',
          flag: false,
          brands: [
            { name: '可爱多', num: '3,457', flag: false },
            { name: '娃哈哈', num: '2,124', flag: true },
            { name: '喜之郎', num: '8,907', flag: false },
            { name: '八喜', num: '6,080', flag: true },
            { name: '小洋人', num: '1,724', flag: false },
            { name: '好多鱼', num: '1,170', flag: false },
          ]
        },
        {
          city: '上海',
          sales: '20,760',
          flag: true,
          brands: [
            { name: '可爱多', num: '2,345', flag: true },
            { name: '娃哈哈', num: '7,109', flag: true },
            { name: '喜之郎', num: '3,701', flag: false },
            { name: '八喜', num: '6,080', flag: false },
            { name: '小洋人', num: '2,724', flag: false },
            { name: '好多鱼', num: '2,998', flag: true },
          ]
        },
        {
          city: '江苏',
          sales: '23,252',
          flag: false,
          brands: [
            { name: '可爱多', num: '2,156', flag: false },
            { name: '娃哈哈', num: '2,456', flag: true },
            { name: '喜之郎', num: '9,737', flag: true },
            { name: '八喜', num: '2,080', flag: true },
            { name: '小洋人', num: '8,724', flag: true },
            { name: '好多鱼', num: '1,770', flag: false },
          ]
        },
         {
          city: '山东',
          sales: '20,760',
          flag: true,
          brands: [
            { name: '可爱多', num: '9,567', flag: true },
            { name: '娃哈哈', num: '2,345', flag: false },
            { name: '喜之郎', num: '9,037', flag: false },
            { name: '八喜', num: '1,080', flag: true },
            { name: '小洋人', num: '4,724', flag: false },
            { name: '好多鱼', num: '9,999', flag: true },
          ]
        }
      ]
//       let add = ''
//       hotData.forEach(function(item){
//           add += ` <li>
//           <span>${item.city}</span>
//           <span>${item.sales} <s class="${item.flag ? 'icon-up':'icon-down'}"></s></span>
//         </li> `
//       })
//       $('.sup').html(add) 
//       $('.sup li').on('mouseenter',function(){
//           $(this).addClass('active').siblings().removeClass('active')
//           let index = $(this).index()
//           inde = index
//           let brands = hotData[index].brands
//           let add = ''
//           brands.forEach(function(item){
//               add+=`<li><span>${item.name}</span><span>${item.num} <s class="${item.flag?'icon-up':'icon-down'}"></s></span></li>`
//           })
//           $('.sub').html(add)
//       })
//       $('.sup li').eq(0).triggerHandler('mouseenter')


//       let timer = setInterval(function(){
//           inde++
//           if(inde>4){
//               inde = 0
//           }
//           $('.sup li').eq(inde).triggerHandler('mouseenter')
//       },1000)
//       $('.top').on('mouseenter',function(){
//           clearInterval(timer)
//       })
//       $('.top').on('mouseleave',function(){
//           timer = setInterval(function(){
//             inde++
//             if(inde>4){
//                 inde = 0
//             }
//             $('.sup li').eq(inde).triggerHandler('mouseenter')
//           },1000)
//       })



         let add = ''
         hotData.forEach(function(item){
           add += `<li>
           <span>${item.city}</span>
           <span>${item.sales}<s class="${item.flag?'icon-up':'icon-down'}"></s></span>
         </li> `
         })
         $('.sup').html(add)
         $('.sup li').on('mouseenter',function(){
           $(this).addClass('active').siblings().removeClass('active')
           let index = $(this).index()
           inde = index
           let brands = hotData[index].brands
           let add = ''
           brands.forEach(function(item){
             add+=` <li><span>${item.name}</span><span>${item.num} <s class="${item.flag?'icon-up':'icon-down'}"></s></span></li> `
           })
           $('.sub').html(add)
          })
          $('.sup li').eq(0).triggerHandler('mouseenter')
          let timer = setInterval(function(){
            inde++
            if(inde>5){
              inde = 0
            }
            $('.sup li').eq(inde).triggerHandler('mouseenter')
          },1000)
          $('.top').on('mouseenter',function(){
            clearInterval(timer)
          })
          $('.top').on('mouseleave',function(){
            timer = setInterval(function(){
              inde++
              if(inde>5){
                inde = 0
              }
              $('.sup li').eq(inde).triggerHandler('mouseenter')
            },1000)
          })
})